<!--
 * @Author: weidewei
 * @Date: 2025-05-19 09:09:42
 * @LastEditors: weidewei
 * @LastEditTime: 2025-05-21 16:28:08
 * @Description: 
 * @FilePath: \v3\src\views\home\index.vue
-->
<template>
	<div>
		<h2>首页</h2>
		<test-props a="123" b="456" :user-info="userInfo" />
		<test-emit @handle-params="getParams" />
		<h2>通过emit拿到了参数：{{ emitParams }}</h2>
		<test-slot>
			<h3>这是一个默认插槽</h3>
			<!-- <template v-slot:hasName>
            <h3>这是一个具名插槽</h3>
        </template> -->
			<template #hasName>
				<h3>这是一个具名插槽</h3>
			</template>
			<template #scopeSlot="scoped">
				<h1>这是一个作用域的插槽：{{ scoped }}</h1>
			</template>
		</test-slot>
		<div class="section">
			<test-ref ref="refTest" />
			<button style="margin-top: 10px" @click="getRef">点击获取组件实例</button>
		</div>
		<keep-alive>
			<test-life-cycle v-if="show" :a="34"></test-life-cycle>
		</keep-alive>
		<button @click="show = !show">卸载/挂载组件</button>
		<test-event-bus>
			{{ eventBusVal }}
		</test-event-bus>
		<test-pinia></test-pinia>
		<test-provide-inject></test-provide-inject>
	</div>
</template>
<script lang="ts" setup>
import { reactive, defineAsyncComponent, ref, onErrorCaptured, getCurrentInstance, onUnmounted, provide } from "vue";
import TestProps from "./components/TestProps.vue";
const TestEmit = defineAsyncComponent(() => import("./components/TestEmit.vue"));
const TestSlot = defineAsyncComponent(() => import("./components/TestSlot.vue"));
const TestRef = defineAsyncComponent(() => import("./components/TestRef.vue"));
const TestLifeCycle = defineAsyncComponent(() => import("./components/TestLifeCycle.vue"));
const TestEventBus = defineAsyncComponent(() => import("./components/TestEventBus.vue"));
const TestPinia = defineAsyncComponent(() => import("./components/TestPinia.vue"));
const TestProvideInject = defineAsyncComponent(() => import("./components/TestProvideInject.vue"));
const refTest = ref();
const show = ref(true);
const eventBusVal = ref(null);
const { proxy } = getCurrentInstance()!;
const userInfo = reactive({
	name: "张三",
	age: 18,
	gender: "男"
});
let emitParams = ref(null);
function getParams(data) {
	console.log("data", data);
	emitParams.value = data;
	// console.log(emitParams)
}

function getRef() {
	// console.log(refTest.value)
	console.log("rnum", refTest.value?.num);
}

proxy.$bus.on("eventBus", function (val) {
	// console.log('val',val)
	eventBusVal.value = val;
});

onUnmounted(() => {
	proxy.$bus.off("eventBus");
});

provide("default");

provide("test", "这是一个测试数据");

provide("fnObj", () => {
	return {
		fn1: getRef,
		fn2: () => {
			console.log("fn2");
			return "fn2";
		}
	};
});

// 捕获了后代组件传递的错误时调用
onErrorCaptured((err, instance, info) => {
	console.log("err", err); // 报错信息
	console.log("instance", instance); // 触发该错误的组件实例
	console.log("info", info); // 说明错误来源的字符串
});
</script>
